<template>
	<div>
		<el-card shadow="never">
			<div class="title_name">代理商基本信息</div>
			<div class="info_box">
				<div style="opacity:0.45;">ID:{{ agentInfo.ageId }}</div>
				<div class="user_info">
					<div class="user_img">
						<img src="../../../assets/img/head_portrait.png" alt="" v-if="!agentInfo.ageImg" />
						<img :src="agentInfo.ageImg" alt="" v-if="agentInfo.ageImg" />
						<div style="text-align: center;margin: 15px 0;font-size: 22px;">代理商</div>
					</div>
					<div class="user_word">
						<div class="other_info">
							<div>注册时间：{{ agentInfo.createTime }}</div>
							<div>归属运营商：{{ agentInfo.schemeName }}</div>
							<div>归属代理商： {{ agentInfo.parentName }} {{ agentInfo.parentPhone }}</div>
						</div>
						<div class="line_info"></div>
						<div class="name_info">
							{{ agentInfo.ageName }}
							<span v-if="agentInfo.isEnabled == false">已停用</span>
						</div>
						<div class="phone_info">{{ agentInfo.agePhone }}</div>
					</div>
				</div>
			</div>
			<div class="attestation_box">
				<div class="attestation_headline" v-if="agentInfo.authStatus == false">
					<div class="attestation_title">认证状态：</div>
					<div class="attestation_state">
						<span v-if="agentInfo.authStatus == false">未认证</span>
						<span v-if="agentInfo.authStatus == true" style="color: #000000;">已认证</span>
					</div>
					<div class="signatory_operate" v-if="agentInfo.authStatus == false" @click="addColumnClick">编辑</div>
					<div v-if="agentInfo.authStatus == true" style="display: flex;">
						<div class="attestation_operate" @click="attestation">{{ attestationOperate }}</div>
						|
						<div class="attestation_operation" @click="addColumnClickEdit">{{ attestationOperation }}</div>
					</div>
				</div>
				<div class="attestation_head" v-if="agentInfo.authStatus == true">
					<div class="attestation_title">认证状态：</div>
					<div class="attestation_state">
						<span v-if="agentInfo.authStatus == false">未认证</span>
						<span v-if="agentInfo.authStatus == true" style="color: #000000;">已认证</span>
					</div>
					<div class="signatory_operate" v-if="agentInfo.authStatus == false" @click="addColumnClick">编辑</div>
					<div v-if="agentInfo.authStatus == true" style="display: flex;">
						<div class="attestation_operate" @click="attestation">{{ attestationOperate }}</div>
						|
						<div class="attestation_operation" @click="addColumnClickEdit">{{ attestationOperation }}</div>
					</div>
				</div>
				<div class="attestation_info" v-show="attestationShow">
					<div style="display: flex;flex-direction: column;justify-content: space-between;height: 150px;">
						<div style="display: flex;flex-direction: column;">
							<div style="text-align: left;color: #333333;font-size: 14px;">身份证号：{{ particularInfo.ageIdCard=='null'?'': particularInfo.ageIdCard}}</div>
							<div style="text-align: left;color: #333333;font-size: 14px;">营业执照编号：{{ particularInfo.licenseNo=='null'?'': particularInfo.licenseNo }}</div>
							<div style="text-align: left;color: #333333;font-size: 14px;">甲方名称：{{ particularInfo.schemeName =='null'?'': particularInfo.schemeName}}</div>
						</div>
						<div style="text-align: left;color: #333333;font-size: 14px;">备注：{{ particularInfo.authRemake }}</div>
					</div>
					<div class="imgshow">
						<img src="../../../assets/img/uploadImg.png" alt="" v-if="particularInfo.cardImg=='null'" />
						<img :src="particularInfo.cardImg" alt="" v-if="particularInfo.cardImg != 'null'" />
						<div style="padding: 3px 0;box-sizing: border-box;">身份证正面</div>
					</div>
					<div class="imgshow">
						<img src="../../../assets/img/uploadImg.png" alt="" v-if="particularInfo.cardImg2=='null'" />
						<img :src="particularInfo.cardImg2" alt="" v-if="particularInfo.cardImg2!= 'null'" />
						<div style="padding: 3px 0;box-sizing: border-box;">身份证背面</div>
					</div>
					<div class="imgshow">
						<img src="../../../assets/img/uploadImg.png" alt="" v-if="particularInfo.licenseImg == 'null'" />
						<img :src="particularInfo.licenseImg" alt="" v-if="particularInfo.licenseImg!= 'null'" />
						<div style="padding: 3px 0;box-sizing: border-box;">营业执照照片</div>
					</div>
				</div>
				<!-- <div @click="routeLink">点我跳转</div> -->
			</div>
			<div class="signatory_box">
				<div class="signatory_headline" v-if="agentInfo.signStatus == false">
					<div class="signatory_title">签约状态：</div>
					<div class="signatory_state">
						<span v-if="agentInfo.signStatus == false">未签约</span>
						<span v-if="agentInfo.signStatus == true" style="color: #000000;">已签约</span>
					</div>
					<div class="signatory_operate" v-if="agentInfo.signStatus == false" @click="cellClick">编辑</div>
					<div v-if="agentInfo.signStatus == true" style="display: flex;">
						<div class="signatory_operate" @click="signatory">{{ signatoryOperate }}</div>
						|
						<div class="signatory_operation" @click="cellClickEdit">{{ signatoryOperation }}</div>
					</div>
				</div>
				<div class="signatory_head" v-if="agentInfo.signStatus == true">
					<div class="signatory_title">签约状态：</div>
					<div class="signatory_state">
						<span v-if="agentInfo.signStatus == false">未签约</span>
						<span v-if="agentInfo.signStatus == true" style="color: #000000;">已签约</span>
					</div>
					<div class="signatory_operate" v-if="agentInfo.signStatus == false" @click="cellClick">编辑</div>
					<div v-if="agentInfo.signStatus == true" style="display: flex;">
						<div class="signatory_operate" @click="signatory">{{ signatoryOperate }}</div>
						|
						<div class="signatory_operation" @click="cellClickEdit">{{ signatoryOperation }}</div>
					</div>
				</div>
				
				<div class="signatory_info" v-show="signatoryShow">
					<div style="display: flex;flex-direction: column;justify-content: space-between;height: 150px;">
						<div style="display: flex;flex-direction: column;">
							<div style="text-align: left;color: #333333;font-size: 14px;">合约编码：{{ particularInfo.contractNo=='null'?'':  particularInfo.contractNo}}</div>
							<div style="text-align: left;color: #333333;font-size: 14px;">签约时间：{{ particularInfo.startTime =='null'?'':  particularInfo.startTime}}——{{ particularInfo.endTime=='null'?'':  particularInfo.endTime }}</div>
							<div style="text-align: left;color: #333333;font-size: 14px;">协议有效期：{{ particularInfo.expiration == 'null'?'': particularInfo.expiration}}个月</div>
						</div>
						<div style="text-align: left;color: #333333;font-size: 14px;">保证金缴纳：{{ particularInfo.signBond }}元</div>
					</div>
					<div class="imgshow">
						<img v-if="contractcShow" src="../../../assets/img/noUpload.png" alt="" />
						<div v-else style="width: 205px;height: 125px;position: relative;border: none;" @click="downloadFile">
							<img src="../../../assets/img/uploading.png" alt="" />
							<div style="position: absolute;width: 100%;display: flex;align-items: center;flex-direction: column;color: #9E9EA0;font-size: 12px;bottom: 10px;border: none;">
								<div style="border: none;">已上传</div>
								<div style="border: none;">请点击下载</div>
							</div>
						</div>

						<div style="padding: 3px 0;box-sizing: border-box;">合同</div>
					</div>
				</div>
			</div>
		</el-card>
		<el-card shadow="never" style="margin-top: 20px;" v-for="(item, index) in dataList" :key="index">
			<div class="title_name">{{ item.topName }}</div>
			<div class="information">
				<div class="information_box" v-for="(childItem, i) in item.dataName" :key="i" @click="routeLink(childItem.id, childItem.nameTab)">
					<div class="box_title">{{ childItem.name }}</div>
					<div class="title_line"></div>
					<div class="box_num">{{ childItem.totalNum }}</div>
					<div class="yest_num">昨日新增：{{ childItem.yesterdayNum }}</div>
				</div>
			</div>
		</el-card>
		<!-- 添加认证信息 -->
		<el-dialog :title="cname" :visible.sync="dialogVisible" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="身份证号" prop="cardID">
					<el-input v-model="ruleForm.cardID" placeholder="请输入身份证号" maxlength="18"></el-input>
				</el-form-item>
				<el-form-item label="身份证正面">
					<el-upload style="float: left;" class="avatar-uploader" action="https://test.beauty-iot.com/appt/api/common/uploadImage"
					 :show-file-list="false" :on-success="frontUpload" :before-upload="beforefrontUpload">
						<img v-if="frontimage" :src="frontimage" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<span class="imgHint">请上传身份证正面照片</span>
				</el-form-item>
				<el-form-item label="身份证背面">
					<el-upload style="float: left;" class="avatar-uploader" action="https://test.beauty-iot.com/appt/api/common/uploadImage"
					 :show-file-list="false" :on-success="rearUpload" :before-upload="beforerearUpload">
						<img v-if="rearimage" :src="rearimage" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<span class="imgHint">请上传身份证背面照片</span>
				</el-form-item>
				<el-form-item label="营业执照编号" prop="licenseNumber">
					<el-input v-model="licenseNumber" placeholder="请输入营业执照编号" maxlength="18"></el-input>
				</el-form-item>
				<el-form-item label="营业执照照片">
					<el-upload style="float: left;" class="avatar-uploader" action="https://test.beauty-iot.com/appt/api/common/uploadImage"
					 :show-file-list="false" :on-success="licenseUpload" :before-upload="beforelicenseUpload">
						<img v-if="licenseimage" :src="licenseimage" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<span class="imgHint">请上传营业执照照片</span>
				</el-form-item>
				<el-form-item label="备注" prop="name">
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="remark" maxlength="100"></el-input>
				</el-form-item>
			</el-form>
			<div style="clear: both;"></div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitFormAttestation('ruleForm')">保存</el-button>
			</span>
		</el-dialog>
		<!-- 修改认证信息 -->
		<el-dialog :title="cname" :visible.sync="dialogVisible2" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleFormEdit" ref="ruleFormEdit" label-width="100px" class="demo-ruleForm">
				<div style="display: flex;align-items: center;margin-bottom: 10px;text-align: right;">
					<div style="width: 132px;"><span style="color: red;">*</span>身份证号</div>
					<el-input v-model="ageIdCardEdit" placeholder="请输入身份证号" maxlength="18" style="margin-left: 10px;"></el-input>
				</div>
				<el-form-item label="身份证正面">
					<el-upload style="float: left;" class="avatar-uploader" action="https://test.beauty-iot.com/appt/api/common/uploadImage"
					 :show-file-list="false" :on-success="frontUpload" :before-upload="beforefrontUpload">
						<img v-if="frontimage !='null'" :src="frontimage" class="avatar" />
						<img v-if="frontimage == 'null'" src="../../../assets/img/picture.png" alt="" style="width: 205px;height: 125px;">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<span class="imgHint">请上传身份证正面照片</span>
				</el-form-item>
				<el-form-item label="身份证背面">
					<el-upload style="float: left;" class="avatar-uploader" action="https://test.beauty-iot.com/appt/api/common/uploadImage"
					 :show-file-list="false" :on-success="rearUpload" :before-upload="beforerearUpload">
						<img v-if="rearimage != 'null'" :src="rearimage" class="avatar" />
						<img v-if="rearimage == 'null'" src="../../../assets/img/picture.png" alt="" style="width: 205px;height: 125px;">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<span class="imgHint">请上传身份证背面照片</span>
				</el-form-item>
				<el-form-item label="营业执照编号" prop="licenseNumber">
					<el-input v-model="licenseNoEdit" placeholder="请输入机构名称" maxlength="18"></el-input>
				</el-form-item>
				<el-form-item label="营业执照照片">
					<el-upload style="float: left;" class="avatar-uploader" action="https://test.beauty-iot.com/appt/api/common/uploadImage"
					 :show-file-list="false" :on-success="licenseUpload" :before-upload="beforelicenseUpload">
						<img v-if="licenseimage != 'null'" :src="licenseimage" class="avatar" />
						<img v-if="licenseimage == 'null'" src="../../../assets/img/picture.png" alt="" style="width: 205px;height: 125px;">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<span class="imgHint">请上传营业执照照片</span>
				</el-form-item>
				<el-form-item label="备注" prop="name">
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="authRemakeEdit"
					 maxlength="100"></el-input>
				</el-form-item>
			</el-form>
			<div style="clear: both;"></div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="submitFormAttestation('ruleFormEdit')">保存</el-button>
			</span>
		</el-dialog>
		<!-- 添加签约信息 -->
		<el-dialog :title="signatoryname" :visible.sync="dialogColor" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleForm2" ref="ruleForm2" :rules="rulesSignatory" align="left" label-width="100px" class="demo-ruleForm">
				<el-form-item label="合同编码" prop="contractNo">
					<el-input v-model="ruleForm2.contractNo" type="text" placeholder="请输入合同编码"></el-input>
				</el-form-item>
				<div style="display: flex;align-items: center;margin-bottom: 10px;text-align: right;">
					<div style="width: 110px;padding-right: 10px;height: 30px;"><span style="color: red;display: inline-block;padding: 0 6px;">*</span>签约时间</div>
					<el-date-picker class="x_soso" v-model="valueDateAdd" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
					 start-placeholder="开始日期" end-placeholder="结束日期" style="margin-left: 0;"></el-date-picker>
				</div>

				<el-form-item label="保证金缴纳" prop="signBond">
					<el-input v-model="ruleForm2.signBond" onkeyup='this.value=this.value.replace(/[^0-9]*$/,"")' min="0" placeholder="请输入已缴纳的保证金金额"></el-input>
				</el-form-item>
				<el-form-item label="合同文件" prop="name">
					<el-upload class="upload-demo" drag action="https://test.beauty-iot.com/appt/api/common/uploadImage" :on-success="uploadFile"
					 :before-upload="beforeUploadFile" multiple accept='.jpg,.pdf,.doc,.docx'>
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">
							将文件拖到此处，或
							<em>点击上传</em>
						</div>
						<div class="el-upload__tip" slot="tip">只能上传jpg/png/pdf/word文件，且不超过10M</div>
					</el-upload>
					<div v-if="contractimage">{{ contractimage }}</div>
					<div v-else></div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogColor = false">取 消</el-button>
				<el-button type="primary" @click="submitFormSignatory('ruleForm2')">保 存</el-button>
			</span>
		</el-dialog>
		<!-- 修改签约信息 -->
		<el-dialog :title="signatoryname" :visible.sync="dialogColor2" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleFormEdit2" ref="ruleFormEdit2" :rules="rulesSignatory" align="left" label-width="100px" class="demo-ruleForm">
				<el-form-item label="合同编码" prop="contractNo">
					<el-input v-model="ruleFormEdit2.contractNo" type="text" placeholder="请输入合同编码"></el-input>
				</el-form-item>
				<div style="display: flex;align-items: center;margin-bottom: 10px;text-align: right;">
					<div style="width: 110px;padding-right: 10px;height: 30px;"><span style="color: red;display: inline-block;padding: 0 6px;">*</span>签约时间</div>
					<el-date-picker class="x_soso" v-model="valueDate" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
					 start-placeholder="开始日期" end-placeholder="结束日期" style="margin-left: 0;"></el-date-picker>
				</div>
				<div style="display: flex;align-items: center;margin-bottom: 10px;text-align: right;">
					<div style="width: 132px;padding-right: 10px;height: 20px;"><span style="color: red;display: inline-block;padding: 0 6px;">*</span>保证金缴纳</div>
					<el-input v-model="ruleFormEdit2.signBond" type="text" onkeyup='this.value=this.value.replace(/[^0-9]*$/,"")'
					 placeholder="请输入已缴纳的保证金金额"></el-input>
				</div>
				<!-- <el-form-item label="保证金缴纳" prop="signBond"></el-form-item> -->
				<el-form-item label="合同文件" prop="name">
					<el-upload class="upload-demo" drag action="https://test.beauty-iot.com/appt/api/common/uploadImage" :on-success="uploadFile"
					 :before-upload="beforeUploadFile" accept='.jpg,.pdf,.doc,.docx'>
						<!-- :on-preview = 'downLoad' -->
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">
							将文件拖到此处，或
							<em>点击上传</em>
						</div>
						<div class="el-upload__tip" slot="tip">只能上传jpg/pdf/word文件，且不超过10M</div>
					</el-upload>
					<div v-if="contractimage">文件地址：{{ contractimage }}</div>
					<div v-else></div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogColor2 = false">取 消</el-button>
				<el-button type="primary" @click="submitFormSignatory('ruleFormEdit2')">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Cookie from 'js-cookie';
	import {
		agentDetailInfo,
		agentPerformance,
		agentResources,
		agentOperation,
		saveagentInfo,
		getAgentAuthInfo
	} from '../../../server/index.js';
	export default {
		inject: ['reload'],
		data() {
			return {
				ageId: '',
				agentInfo: {},
				attestationState: '未认证',
				attestationOperation: '修改',
				signatoryState: '未签约',
				signatoryOperation: '修改',
				dialogVisible: false,
				dialogVisible2: false,
				dialogColor: false,
				dialogColor2: false,
				attestationShow: false,
				signatoryShow: false,
				signatoryname: '',
				contract: '', //合同编号
				valueDateAdd: [],
				valueDate: [], //时间
				cashDeposit: '', //保证金
				cname: '',
				ruleForm: {},
				ruleFormEdit: {},
				ageIdCardEdit: '', //修改身份证号
				licenseNoEdit: '', //修改营业执照编号
				authRemakeEdit: '', //修改备注
				contractEdit: '', //修改合同编号
				signBondEdit: '', //修改保证金
				ruleForm2: {},
				ruleFormEdit2: {},
				remark: '',
				frontimage: '', //身份证正面
				rearimage: '', //身份证反面
				licenseimage: '', //营业执照
				contractimage: '', //合同照片
				contractcShow: false,
				contractcInfoImg: '',
				licenseNumber: '',
				particularInfo: {},
				formData: new FormData(),
				file: {}, //文件数据
				fileUpload: '', //文件数据
				attestationOperate: '展开',
				signatoryOperate: '展开',
				dataList: [{
						topName: '业绩数据',
						dataName: []
					},
					{
						topName: '资源数据',
						dataName: []
					},
					{
						topName: '运营数据',
						dataName: []
					}
				],
				// 认证校验
				rules: {
					cardID: [{
							required: true,
							message: '请输入正确的身份证号',
							trigger: 'blur'
						},
						{
							min: 0,
							max: 18,
							message: '长度在 0 到 18 个字符',
							trigger: 'blur'
						}
					]
				},
				rulesSignatory: {
					contractNo: [{
							required: true,
							message: '请输入正确的合同编码',
							trigger: 'blur'
						},
						{
							min: 0,
							max: 18,
							message: '长度在 0 到 18 个字符',
							trigger: 'blur'
						}
					],
					signBond: [{
							required: true,
							message: '请输入正确的保证金金额',
							trigger: 'blur'
						},
						{
							min: 0,
							max: 10,
							message: '长度在 0 到 10 个字符',
							trigger: 'blur'
						}
					]
				}
			};
		},
		mounted() {
			this.dataupload();
			this.performanceData();
			this.resourceData();
			this.operationData();
			this.viewInformation();
		},
		methods: {
			// 文件上传
			uploadFile(res, file) {
				this.fileUpload = file.response.data.imgUrl;
			},
			beforeUploadFile(file) {
				const isJPG = (file.type === 'image/jpeg' || file.type === 'application/pdf' || file.type === 'application/msword' ||
					file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
				if (!isJPG) {
					this.$message.error({
						offset: '450',
						message: '上传头像图片只能是 JPG/PDF/WORD 格式!'
					});
					// this.$message.error('上传头像图片只能是 JPG/PDF/WORD 格式!');
				}
				const isLt2M = file.size / 1024 / 1024 < 10;
				if (!isLt2M) {
					this.$message.error({
						offset: '450',
						message: '上传文件大小不能超过 10MB!'
					});
				}
				return isLt2M;


			},
			// 下载文件
			downloadFile() {
				window.open(this.particularInfo.contractImg);
				// location.href = 'this.particularInfo.contractImg'
			},
			reloadVal() {
				this.reload();
			},
			// 页面数据加载
			dataupload() {
				var _this = this;
				_this.ageId = this.$route.query.id;
				let obj = {
					ageId: this.$route.query.id
				};
				_this.http.request({
					url: agentDetailInfo,
					data: obj,
					success: function(res) {
						if (res) {
							_this.agentInfo = res;
						}
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						});
					}
				});
			},
			//业绩数据
			performanceData() {
				var _this = this;
				let obj = {
					ageId: this.$route.query.id
				};
				_this.http.request({
					url: agentPerformance,
					data: obj,
					success: function(res) {
						_this.dataList[0].topName = res.topName;
						_this.dataList[0].dataName = res.dataName;
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						});
					}
				})
			},
			//资源数据
			resourceData() {
				var _this = this;
				let obj = {
					ageId: this.$route.query.id
				};
				_this.http.request({
					url: agentOperation,
					data: obj,
					success: function(res) {
						_this.dataList[2].topName = res.topName;
						_this.dataList[2].dataName = res.dataName;
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						});
					}
				});
			},
			//运营数据
			operationData() {
				var _this = this;
				let obj = {
					ageId: this.$route.query.id
				};
				_this.http.request({
					url: agentResources,
					data: obj,
					success: function(res) {
						_this.dataList[1].topName = res.topName;
						_this.dataList[1].dataName = res.dataName;
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						});
					}
				});
			},
			routeLink(index, name) {
				const _this = this;
				let list = Cookie.get('tabList');
				if (list) {
					list = JSON.parse(list);
				} else {
					list = [];
				}
				let item = {};
				item = {
					idItem: index,
					agentId: _this.ageId,
					name: name,
					userName: _this.agentInfo.ageName,
					userPhone: _this.agentInfo.agePhone
				};
				for (var i = 0; i < list.length; i++) {
					let data = list[i];
					if (data.idItem == index) {
						list.splice(i, 1);
						i--;
					}
				}
				list.push(item);
				Cookie.set('tabList', JSON.stringify(list));
				_this.$router.push({
					path: './agentManage',
					query: {
						id: this.$route.query.id
					}
				});
			},
			//认证显示隐藏
			attestation(){
				var _this = this;
				_this.attestationShow = !_this.attestationShow;
				_this.headline1 = !_this.headline1 
				if (_this.attestationOperate == '展开') {
					_this.attestationOperate = '收起';
				} else {
					_this.attestationOperate = '展开'
				}
			},
			// 签约显示隐藏
			signatory() {
				var _this = this;
				_this.signatoryShow = !_this.signatoryShow;
				_this.headline2 = !_this.headline2
				if (_this.signatoryOperate == '展开') {
					_this.signatoryOperate = '收起';
				} else {
					_this.signatoryOperate = '展开';
				}
			},
			// 上传图片-身份证正面
			frontUpload(res, file) {
				this.frontimage = file.response.data.imgUrl;
			},
			beforefrontUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			},
			//图片上传-身份证背面
			rearUpload(res, file) {
				this.rearimage = file.response.data.imgUrl;
			},
			beforerearUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			},
			//商品上传-营业执照
			licenseUpload(res, file) {
				this.licenseimage = file.response.data.imgUrl;
			},
			beforelicenseUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			},
			//上传合同图片
			contractUpload(res, file) {
				this.contractimage = file.response.data.imgUrl;
			},
			beforecontractUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			},
			// 添加认证信息
			addColumnClick() {
				this.dialogVisible = true;
				this.cname = '代理商信息认证';
			},
			// 修改认证信息
			addColumnClickEdit() {
				var _this = this;
				_this.dialogVisible2 = true;
				this.cname = '代理商信息认证';
				_this.viewInformation();
			},
			// 认证数据提交
			submitFormAttestation(formName) {
				var _this = this;
				var idcardReg =
					/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
				if (_this.agentInfo.authStatus == false) {
					if (!idcardReg.test(_this.ruleForm.cardID)) {
						_this.$message({
							offset: '200',
							message: '请输入正确的身份证号码'
						});
						return false;
					}
				} else {
					if (!idcardReg.test(_this.ageIdCardEdit)) {
						_this.$message({
							offset: '200',
							message: '请输入正确的身份证号码'
						});
						return false;
					}
				}
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var obj = {
							ageId: this.$route.query.id,
							ageIdCard: _this.ruleForm.cardID ? _this.ruleForm.cardID : _this.ageIdCardEdit,
							cardImg: _this.frontimage,
							cardImg2: _this.rearimage,
							licenseNo: _this.licenseNumber ? _this.licenseNumber : _this.licenseNoEdit,
							licenseImg: _this.licenseimage,
							authRemake: _this.remark ? _this.remark : _this.authRemakeEdit
						};
						_this.http.request({
							url: saveagentInfo,
							data: obj,
							success: function(res) {
								if (res == true) {
									if (_this.agentInfo.authStatus == false) {
										_this.dialogVisible = false;
									} else {
										_this.dialogVisible2 = false;
									}
									_this.reload();
								}
							},
							error: function(err) {
								_this.$message({
									offset: '200',
									message: err.msg
								});
							}
						});
					}
				})

			},
			//添加签约数据
			cellClick() {
				const _this = this;
				_this.signatoryname = '代理商签约信息';
				_this.dialogColor = true;
			},
			// 修改签约信息
			cellClickEdit() {
				const _this = this;
				_this.signatoryname = '代理商签约信息';
				_this.dialogColor2 = true;
				_this.viewInformation();
			},
			// 签约数据提交
			submitFormSignatory(formName) {
				var _this = this;
				var obj;
				if (_this.agentInfo.signStatus == false) {
					console.log('时间段=' + _this.valueDateAdd)
					if (_this.valueDateAdd == '' || _this.valueDateAdd == 'undefined' || _this.valueDateAdd == undefined) {
						_this.$message({
							offset: '200',
							message: '请选择签约时间'
						});
						return;
					}

					let startTime = _this.valueDateAdd[0];
					let endTime = _this.valueDateAdd[1];
					obj = {
						ageId: this.$route.query.id,
						startTime: undefined == startTime ? '' : startTime,
						endTime: undefined == endTime ? '' : endTime,
						signBond: undefined == _this.ruleForm2.signBond ? '' : _this.ruleForm2.signBond,
						contractImg: _this.fileUpload,
						contractNo: undefined == _this.ruleForm2.contractNo ? '' : _this.ruleForm2.contractNo
					};
				} else {
					console.log('修改时间=' + _this.valueDate)
					if (_this.valueDate == '' || _this.valueDate == 'undefined' || _this.valueDate == undefined) {
						_this.$message({
							offset: '200',
							message: '请选择签约时间'
						});
						return;
					}

					obj = {
						ageId: this.$route.query.id,
						startTime: undefined == _this.valueDate[0] ? '' : _this.valueDate[0],
						endTime: undefined == _this.valueDate[1] ? '' : _this.valueDate[1],
						signBond: undefined == _this.ruleFormEdit2.signBond ? '' : _this.ruleFormEdit2.signBond,
						contractImg: _this.fileUpload,
						contractNo: undefined == _this.ruleFormEdit2.contractNo ? '' : _this.ruleFormEdit2.contractNo
					};
				}
				this.$refs[formName].validate(valid => {
					if (valid) {
						_this.http.request({
							url: saveagentInfo,
							data: obj,
							success: function() {
								if (_this.agentInfo.signStatus == false) {
									_this.dialogColor = false;
									_this.$message({
										offset: '200',
										message: '添加成功'
									});
								} else {
									_this.dialogColor2 = false;
									_this.$message({
										offset: '200',
										message: '修改成功'
									});
								}
								_this.reload();
							},
							error: function(err) {
								_this.$message({
									offset: '200',
									message: err.msg
								});
							}
						});
					}
				})

			},

			//查看认证及签约信息
			viewInformation() {
				var _this = this;
				let obj = {
					ageId: this.$route.query.id
				};
				_this.http.request({
					url: getAgentAuthInfo,
					data: obj,
					success: function(res) {
						_this.particularInfo = res;
						if (res.authRemake) {
							_this.particularInfo.authRemake = res.authRemake
						} else {
							_this.particularInfo.authRemake = ''
						}
						_this.ruleFormEdit2 = res
						_this.ageIdCardEdit = res.ageIdCard == 'null' ? '' : res.ageIdCard;
						_this.licenseNoEdit = res.licenseNo == 'null' ? '' : res.licenseNo;
						_this.authRemakeEdit = res.authRemake == 'null' ? '' : res.authRemake;
						// _this.signBondEdit = res.signBond== 'null'?'':res.signBond;
						// _this.contractEdit = res.contractNo == 'null'?'':res.contractNo;
						_this.frontimage = res.cardImg;
						_this.rearimage = res.cardImg2;
						_this.licenseimage = res.licenseImg;
						_this.contractimage = res.contractImg;

						if (_this.agentInfo.signStatus == false) {
							_this.valueDate == [];
						} else {
							var dataArr = [];
							dataArr.push(res.startTime);
							dataArr.push(res.endTime);
							_this.valueDate = dataArr;
						}
						console.log(_this.particularInfo.contractImg);
						if (_this.particularInfo.contractImg == 'null' || _this.particularInfo.contractImg == '' || _this.particularInfo.contractImg == null) {
							_this.contractcShow = true
						} else {
							_this.contractcShow = false
						}
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						});
					}
				});
			}
		}
	};
</script>

<style>
	/* 详情样式 */
	.title_name {
		border-left: 2px solid #333;
		padding: 0 0 0 15px;
		box-sizing: border-box;
		text-align: left;
	}

	.info_box {
		background: #f7f8fa;
		padding: 30px;
		box-sizing: border-box;
		margin-top: 15px;
		display: flex;
		flex-direction: column;
		text-align: left;
		width: 100%;
	}

	.user_info {
		display: flex;
		align-items: center;
		margin-top: 15px;
	}

	.user_img {
		display: flex;
		flex-direction: column;
	}

	.user_img img {
		width: 70px;
		height: 70px;
		overflow: hidden;
		border-radius: 50%;
	}

	.user_word {
		display: flex;
		flex-direction: column;
		margin-left: 20px;
		width: calc(100% - 90px);
		margin-top: -50px;
	}

	.other_info {
		display: flex;
		align-items: center;
		color: rgba(0, 0, 0, 0.8);
		opacity: 0.45;
		font-size: 12px;
		margin-bottom: 10px;
	}

	.other_info div {
		margin-right: 15px;
	}

	.line_info {
		width: 100%;
		height: 2px;
		background: #dadadb;
	}

	.name_info {
		padding: 5px 0;
		box-sizing: border-box;
		color: #000000;
		font-size: 18px;
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.name_info span {
		margin-left: 10px;
		color: #DB2828;
		border: 1px solid #DB2828;
		padding: 0 2px;
		box-sizing: border-box;
		text-align: center;
		font-size: 12px;
		height: 18px;
		line-height: 18px;
		transform: scale(0.8);
	}

	.phone_info {
		font-size: 14px;
		color: #000000;
	}

	.attestation_box {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
	}

	.attestation_headline {
		width: 100%;
		background: rgba(244, 242, 255, 1);
		border: 1px solid rgba(133, 88, 250, 1);
		padding: 10px 20px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	.attestation_head{
		width: 100%;
		background:rgba(247,248,250,1);
		padding: 10px 20px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	

	.attestation_title {
		font-size: 14px;
		color: #000000;
		font-weight: bold;
	}

	.attestation_state {
		color: #716aca;
		font-size: 14px;
		font-weight: bold;
	}

	.attestation_operate {
		color: #716aca;
		font-size: 14px;
		margin-left: 15px;
		padding-right: 10px;
	}

	.attestation_operation {
		color: #716aca;
		font-size: 14px;
		margin-left: 15px;
	}

	.signatory_box {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
	}

	.signatory_headline {
		width: 100%;
		background: rgba(244, 242, 255, 1);
		border: 1px solid rgba(133, 88, 250, 1);
		padding: 10px 20px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	.signatory_head{
		width: 100%;
		background:rgba(247,248,250,1);
		padding: 10px 20px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.signatory_title {
		font-size: 14px;
		color: #000000;
		font-weight: bold;
	}

	.signatory_state {
		color: #716aca;
		font-size: 14px;
		font-weight: bold;
	}

	.signatory_operate {
		color: #716aca;
		font-size: 14px;
		margin-left: 15px;
		padding-right: 10px;
	}

	.signatory_operation {
		color: #716aca;
		font-size: 14px;
		margin-left: 15px;
	}

	.information {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		margin-top: 15px;
	}

	.information_box {
		width: 300px;
		background: rgba(247, 248, 250, 1);
		display: flex;
		flex-direction: column;
		margin-right: 12px;
		align-items: center;
		padding: 15px;
		box-sizing: border-box;
	}

	.box_title {
		text-align: center;
		font-size: 14px;
		color: #333333;
	}

	.title_line {
		width: 100%;
		height: 2px;
		background: #eaedf2;
		margin: 5px 0;
	}

	.box_num {
		color: #716aca;
		font-size: 34px;
		padding: 4px 0;
		box-sizing: border-box;
		font-family: Helvetica-Roman-SemiB;
	}

	.yest_num {
		color: #716aca;
		font-size: 14px;
		padding: 4px 0;
		box-sizing: border-box;
	}

	/* 图片上传样式 */
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		height: 125px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 206px;
		height: 125px;
		line-height: 125px;
		text-align: center;
	}

	.avatar {
		width: 205px;
		height: 125px;
		display: block;
	}

	.imgHint {
		display: block;
		width: 205px;
		font-size: 12px;
		color: #9e9ea0;
	}

	.attestation_info {
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.imgshow {
		display: flex;
		flex-direction: column;
		margin-left: 30px;
		border: 1px solid #cacaca;
	}

	.imgshow img {
		width: 205px;
		height: 125px;
	}

	.imgshow div {
		color: #9e9ea0;
		font-size: 12px;
		text-align: center;
		border-top: 1px dashed #cacaca;
		box-sizing: border-box;
	}

	.signatory_info {
		display: flex;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
	}

	.el-form-item__label {
		width: 120px !important;
	}

	.el-form-item__content {
		margin-left: 120px !important;
		line-height: 20px;
	}

	.el-dialog__header {
		text-align: left;
		font-weight: bold;
		padding: 20px 20px 10px 50px;
		box-sizing: border-box;
	}
	.el-tabs__item:hover{
		color: #716aca;
	}
</style>
